<template>
  <el-dialog v-bind="$attrs" :top="''" v-on="$listeners" :custom-class="customClass" :close-on-click-modal="false">
    <!-- 标题 -->
    <div class="modal-title" slot="title">
      <slot name="title">
        <el-input
          v-if="isEdit"
          ref="cpTitleInput"
          v-model="editTitle"
          class="editTitle"
          clearable
          @clear="clearTitle"
          @keyup.enter.native="saveEdit"
          @blur="saveEdit"
        ></el-input>
        <span v-else class="showSpan">
          <span class="spanTitle">{{ title }}</span>
          <span class="modal-title-icon" @click="clickEdit" v-if="canEdit">
            <svg-icon type="icon-edit-gray" />
          </span>
        </span>
      </slot>
    </div>
    <!-- 内容 -->
    <div class="modal-content" :class="[bodyClass]">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" slot="footer" class="f-row f-justify--end f-align--center">
      <slot name="footer" />
    </div>
    <div v-if="loading" v-loading="loading" class="modal-loading"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "IModal",
  inheritAttrs: false,
  components: {},
  data() {
    return {
      isEdit: false,
      editTitle: "",
    };
  },
  props: {
    title: String,
    titleTip: String,
    cls: { type: String, default: "" },
    bodyClass: String,
    size: {
      // 只支持 // 1140 980 700 560 450 370 四个尺寸
      type: String,
      default: "medium",
      validator(v) {
        if (!v || ["max", "large", "normal", "medium", "small", "mini"].includes(v)) {
          return true;
        }
        console.error("Modal组件仅仅支持【max, large, normal, medium, small, mini】三个尺寸");
        return false;
      },
    },
    loading: {
      // loading 整个弹窗
      type: Boolean,
      default: false,
    },
    canEdit: {
      type: Boolean,
      default: false,
    },
    titleType: {
      type: String,
      default: "dimension",
    },
  },
  computed: {
    customClass() {
      return `i-common-dialog ${this.size} ${this.cls}`;
    },
  },

  methods: {
    // 点击编辑
    clickEdit() {
      this.isEdit = true;
      this.editTitle = this.title;
    },
    // 清空标题
    clearTitle() {
      this.editTitle = "";
      // 获取焦点
      this.$refs.cpTitleInput.focus();
    },
    // 保存编辑
    saveEdit() {
      let editTitle = this.editTitle;
      if (this.editTitle === "") {
        if (this.titleType === "dimension") {
          editTitle = "自定义名称";
        } else if (this.titleType === "target") {
          editTitle = "指标";
        }
      }
      this.isEdit = false;
      this.$emit("saveEdit", editTitle);
    },
  },
};
</script>

<style lang="scss">
// 全屏重置居中的dialog
.i-common-dialog.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: var(--theme-border-radius);
  max-width: calc(100vw - 40px);

  .modal-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
  }

  .modal-content {
    //max-height: calc(100vh - 136px); // 满屏幕 上下间距 10px
    box-sizing: border-box;
    padding: 40px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    font-weight: 600;
    color: var(--theme-color-text-primary);
  }
  .el-dialog__footer {
    padding: 0 20px 30px;
    border-bottom-left-radius: var(--theme-border-radius);
    border-bottom-right-radius: var(--theme-border-radius);
  }

  &.max {
    width: 1570px;
  }

  &.large {
    width: 980px;
  }

  &.normal {
    width: 700px;
  }

  &.medium {
    width: 560px;
  }

  &.small {
    width: 450px;
  }

  &.mini {
    width: 370px;
  }

  &.styleSetDialog {
    width: 624px;
  }

  .el-dialog__body {
    // overflow-y: auto;
    position: relative;
    // height: calc(84vh - 55px);
    padding: 0;
    scrollbar-width: none; /* 火狐 */
    border-bottom-left-radius: var(--theme-border-radius);
    border-bottom-right-radius: var(--theme-border-radius);

    &::-webkit-scrollbar {
      // width: 6px; // 横向滚动条
      // height: 6px; // 纵向滚动条
      display: none;
      // TODO: 暂时隐藏
    }

    // 滚动条的滑块
    &::-webkit-scrollbar-thumb {
      background-color: #bcbeca;
      border-radius: 13px;
    }
  }

  .el-dialog__header {
    padding: 0 20px;
    min-height: 50px;
    line-height: 50px;
    color: var(--theme-color-text-primary);
    font-size: 16px;
    font-weight: 500;
    position: sticky;
    left: 0;
    top: 0;
    background-color: #fff;
    border: 1px solid var(--theme-color-border-split);
    z-index: 1001;
    border-top-left-radius: var(--theme-border-radius);
    border-top-right-radius: var(--theme-border-radius);
  }

  .editTitle {
    width: 180px;
  }

  .showSpan {
    display: flex;
    align-items: center;

    .spanTitle {
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .modal-title-icon {
    margin-left: 8px;
    cursor: pointer;

    .svg-icon {
      width: 16px;
      height: 16px;
    }
  }

  // .modal-footer {
  //   position: sticky;
  //   left: 0;
  //   bottom: 0;
  //   width: 100%;
  //   box-sizing: border-box;
  //   padding: 15px 20px 30px;
  //   // min-height: 72px;
  //   background-color: #fff;
  // }

  // .btn-right {
  //   min-height: 72px;
  //   display: flex;
  //   justify-content: flex-end;
  //   align-items: center;
  // }
}
</style>
